import { Http } from '../Api'
import { Modal, Spin } from 'antd'
import { LeftBox } from './LeftBox'
import { TreeTabList } from './Mars3Config'
import { useState, useEffect, useRef } from 'react'
import { RenderElements, RenderFiles } from './Render'
import { useBoolean, useEventEmitter, useRequest } from 'ahooks'
import { Initialization } from './Initialization'

// 主窗口
const Mars3DScene = ({ scene, initializationEvent }) => {
    /**
     *  ? ~@    scene                           当前场景参数
     *  ? ~@    initializationEvent             初始化场景列表
     */
    // TODO API
    // 添加默认视角
    const { run: AddDefaultCenter } = useRequest(Http, {
        manual: true,
        onSuccess: () => {
            setFalse()
            initializationEvent.emit()
        },
    })
    // 获取场景明细数据
    const { run: getScenesDetails } = useRequest(Http, {
        manual: true,
        onSuccess: ({ elements, files }) => RenderSceneDetails(elements, files),
    })
    // TODO 参数
    const [MapLoading, { setFalse }] = useBoolean(true) //窗口加载状态
    const [Map, setMap] = useState() // 地图初始函数
    const [Gra, setGra] = useState() // 地图图层函数
    const MapDiv = useRef() // 地形载体div
    const [KMLData, setKMLData] = useState([]) // KML数组
    const [ElementsData, setElementsData] = useState([]) // 元素数组
    const [FilesData, setFilesData] = useState([]) // 模型数组
    const [TreeSelect, setTreeSelect] = useState(null) // 顶部操作栏参数
    // 新增回调
    const newModelEvent = useEventEmitter()
    newModelEvent.useSubscription(() => getScenesDetails({ url: `getScenesDetailsUuid`, path: [scene.uuid] }))
    // 修改回调
    // 初始化地图
    const InitializationMapEvent = useEventEmitter()
    const InitializeCenterEvent = useEventEmitter()
    InitializationMapEvent.useSubscription(({ map, gra }) => {
        setMap(map)
        setGra(gra)
        setFalse()
        getScenesDetails({ url: `getScenesDetailsUuid`, path: [scene.uuid] })
    })
    InitializeCenterEvent.useSubscription(e => {
        if (e) AddDefaultCenter(e)
        else setFalse()
    })

    // 渲染场景明细
    const RenderSceneDetails = (elements, files) => {
        if (elements && elements.length !== 0) {
            RenderElements(Map, Gra, elements)
            setElementsData(elements.filter(v => v.storageType === 0))
            setKMLData(elements.filter(v => v.storageType === 1))
        } else {
            setElementsData([])
            setKMLData([])
        }
        if (files && files.length !== 0) {
            RenderFiles(Map, files, elements)
            setFilesData(files)
        } else {
            setFilesData([])
        }
    }
    useEffect(() => Initialization(scene, MapDiv, InitializationMapEvent), [scene, InitializationMapEvent])
    return (
        <div className="Mars3DScene">
            <Spin spinning={MapLoading}>
                <div id="mars3dView" ref={MapDiv} />
                {!MapLoading && (
                    <>
                        <div className="tabList  animate__animated  animate__slideInLeft">
                            {TreeTabList.map((item, index) => (
                                <div
                                    className={TreeSelect === index ? 'active' : ''}
                                    key={`tabList${index}`}
                                    onClick={() => setTreeSelect(TreeSelect === index ? null : index)}
                                >
                                    {item.icon}
                                    {item.title}
                                </div>
                            ))}
                        </div>
                        {(TreeSelect || TreeSelect === 0) && (
                            <LeftBox
                                scene={scene} // 场景基础数据
                                TreeSelect={TreeSelect} // 当前头部导航
                                Map={Map} // 地图数据
                                Gra={Gra} // 图层数据
                                KMLData={KMLData} // KML数据
                                ElementsData={ElementsData} // 元素数据
                                FilesData={FilesData} // 模型数据
                                newModelEvent={newModelEvent} // 新数据回调
                                initializationEvent={initializationEvent} // 初始化列表
                            />
                        )}
                    </>
                )}
            </Spin>
        </div>
    )
}

// 主窗口
export const Mars3DModal = ({ data, Off, initializationEvent }) => {
    const { title, scene } = data
    return (
        <Modal
            className="Mars3DModal"
            title={title}
            open={true}
            onCancel={Off}
            destroyOnClose={true}
            width="90vw"
            footer={null}
            maskClosable={false}
        >
            <Mars3DScene scene={scene} initializationEvent={initializationEvent} />
        </Modal>
    )
}
